<template>
  <div>
    <myheader/>
    <van-form @submit="reg">
      <van-field
        v-model="form.username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="form.password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="form.mobile"
        name="mobile"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '必须输入手机号' }]"
      />

      <drag-verify
        :width="width"
        :height="height"
        :text="text"
        :circle="false"
        :success-text="successText"
        :background="background"
        :progress-bar-bg="progressBarBg"
        :completed-bg="completedBg"
        :handler-bg="handlerBg"
        :handler-icon="handlerIcon"
        :text-size="textSize"
        :success-icon="successIcon"
        ref="Verify"
      >
      </drag-verify>

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" style='width:100px'>提交</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
//导入头部文件
import myheader from '@/components/myheader'
import dragVerify from 'vue-drag-verify'

export default {
  data() {
    return {
      form: {},
      handlerIcon: "fa fa-angle-double-right",
      successIcon: "fa fa-check",
      background: "#cccccc",
      progressBarBg: "#4b0",
      completedBg: "#66cc66",
      handlerBg: "#fff",
      text: "请将滑块拖动到右侧",
      successText: "验证成功",
      width: 320,
      height: 42,
      textSize: "18px"
    };
  },
  methods: {
    reg() {
      // 验证滑块是否成功
      if (this.$refs.Verify.isPassing == true) {
        this.axios.post('users/reg', this.form).then(res => {
          if (res.data.code == 10012) {
            alert('请输入正确的手机号')
          }
        })
      } else {
        alert('请先验证')
      }


    },


  },
  //注册组件
  components: {
    'myheader': myheader,
    'dragVerify': dragVerify

  }
}
</script>
<style lang="">

</style>
